var box = document.querySelector('#box')
var ul = document.querySelector('#box>ul')
var left = document.querySelector('.left')
var right = document.querySelector('.right')
var round = document.querySelector('.round')

// 1. 鼠标移入移出展示左右箭头
box.onmouseenter = function() {
  left.style.display = 'block'
  right.style.display = 'block'
}
box.onmouseleave = function() {
  left.style.display = 'none'
  right.style.display = 'none'
}

// 2. 动态生成小圆点
for(var i = 0; i < ul.children.length; i++) {
  var span = document.createElement('span')

  span.setAttribute('data-index', i)

  round.appendChild(span)
}
round.children[0].className = 'active'

// 3. 给小圆点注册事件 拍他高亮
var spans = document.querySelectorAll('span')
for(var i = 0; i < spans.length;  i++) {
  spans[i].onclick = function() {
    document.querySelector('.active').className = ''
    this.className = 'active'

    // 4. 点击小圆点 移动ul
    var index = this.getAttribute('data-index')
    animate(ul, - index * 450 )

  }
}

// 5. 右侧按钮点击事件
var num = 0
right.onclick = function() {
  if(num === 3) {
    ul.style.left = 0
    num = 0
  }

  num += 1
  animate(ul, - num * 450)
}
